<template>

    <div>
        <div :id="uniqid">
        </div>

        <script type="text/template" :id="uniqid + '-template'">
            <div class="qq-uploader-selector qq-uploader avatar-uploader" qq-drop-area-text="拖拽至此">
                <img class="main-preview" src="" />

                <div class="qq-upload-button-selector qq-upload-button">
                    <div class="qq-total-progress-bar-container-selector qq-total-progress-bar-container">
                        <div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-total-progress-bar-selector qq-progress-bar qq-total-progress-bar"></div>
                    </div>
                    <div>修改头像</div>
                </div>
                <div class="qq-upload-drop-area-selector qq-upload-drop-area" qq-hide-dropzone>
                    <span class="qq-upload-drop-area-text-selector"></span>
                </div>
                <span class="qq-drop-processing-selector qq-drop-processing">
                    <span>正在上传...</span>
                    <span class="qq-drop-processing-spinner-selector qq-drop-processing-spinner"></span>
                </span>
                <ul class="qq-upload-list-selector qq-upload-list" aria-live="polite" aria-relevant="additions removals">
                    <li>
                        <span class="qq-upload-spinner-selector qq-upload-spinner"></span>
                        <img class="qq-thumbnail-selector" qq-max-size="200" qq-server-scale>
                    </li>
                </ul>

                <dialog class="qq-alert-dialog-selector">
                    <div class="qq-dialog-message-selector"></div>
                    <div class="qq-dialog-buttons">
                        <button type="button" class="qq-cancel-button-selector">关闭</button>
                    </div>
                </dialog>

                <dialog class="qq-confirm-dialog-selector">
                    <div class="qq-dialog-message-selector"></div>
                    <div class="qq-dialog-buttons">
                        <button type="button" class="qq-cancel-button-selector">否</button>
                        <button type="button" class="qq-ok-button-selector">是</button>
                    </div>
                </dialog>

                <dialog class="qq-prompt-dialog-selector">
                    <div class="qq-dialog-message-selector"></div>
                    <input type="text">
                    <div class="qq-dialog-buttons">
                        <button type="button" class="qq-cancel-button-selector">取消</button>
                        <button type="button" class="qq-ok-button-selector">确认</button>
                    </div>
                </dialog>
            </div>
        </script>

    </div>

</template>

<style lang="scss">
    @import "../../../../../../node_modules/fine-uploader/all.fine-uploader/fine-uploader-new.css";
    @import "../../../resources/assets/sass/avatar_uploader";

</style>

<script>

    import {FineUploader} from "fine-uploader";

    export default {
        data() {
            return {
                uploader: null
            };
        },
        props: {
            'filesize': Number,
            'filetype': {
                type: String,
                default: '.jpg,.png'
            },
            'rectsize': Number,
            'minres': String,
            'maxres': String,
            'url': String,
            'defaultImg': String,
            'name': String
        },
        mounted() {
            const vm = this;
            let options = {
                multiple: false,
                validation: {
                    acceptFiles: this.filetype,
                    allowEmpty: false,
                    sizeLimit: 1024 * this.filesize,
                    image: {},
                },
                callbacks: {
                    onComplete() {
                        const preview = $(`#${vm.uniqid} .main-preview`, vm.$el);
                        preview.attr('src', $('.qq-upload-list img:last', vm.$el).attr('src'));
                        preview.css('top', Math.floor((200 - preview.height()) / 2) + 'px');

                        vm.$emit('uploaded');
                    }
                },
                messages: {
                    emptyError: "{file} 是个空文件.",
                    maxHeightImageError: "图片高度超限.",
                    maxWidthImageError: "图片宽度超限.",
                    minHeightImageError: "图片高度不够.",
                    minWidthImageError: "图片宽度不够.",
                    minSizeError: "{file} 文件太小, 最低限制为 {minSizeLimit}.",
                    noFilesError: "没有文件需要上传.",
                    onLeave: "图片正在上传, 离开将会取消.",
                    retryFailTooManyItemsError: "重试太多次失败.",
                    sizeError: "{file} 文件太大, 最大限制为 {sizeLimit}.",
                    tooManyItemsError: "文件个数超限 ({netItems}). 限制为 {itemLimit}.",
                    typeError: "{file} 文件格式错误. 有效格式: {extensions}.",
                    unsupportedBrowserIos8Safari: "不支持 iOS8 Safari 浏览器."
                },
                element: $(`#${this.uniqid}`, this.$el).get(0),
                request: {
                    customHeaders: {
                        'X-XSRF-TOKEN': Cookies.get('XSRF-TOKEN')
                    },
                    endpoint: '/admin/users/profile/avatar'
                },
                retry: {
                    enableAuto: true
                },
                template: this.uniqid + '-template'
            };

            if (this.rectsize) {
                options.scaling = {
                    sendOriginal: false,
                    sizes: [
                        {name: "rect", maxSize: this.rectsize}
                    ]
                };
            }

            if (this.minres) {
                let minres = this.minres.split('x');
                this.validation.image.minWidth = _.parseInt(minres[0]);
                this.validation.image.minHeight = _.parseInt(minres[1]);
            }

            if (this.maxres) {
                let maxres = this.minres.split('x');
                this.validation.image.maxWidth = _.parseInt(maxres[0]);
                this.validation.image.maxHeight = _.parseInt(maxres[1]);
            }

            this.uploader = new FineUploader(options);

            this.$on('preview', (src) => {
            });
        },
        computed: {
            uniqid() {
                return 'fine-uploader-' + this.name;
            }
        },
        methods: {
            preview(src) {
                if (!src) {
                    return;
                }

                const preview = $(`#${this.uniqid} .main-preview`, this.$el);
                preview.attr('src', src);
                preview.css('top', Math.floor((200 - preview.height()) / 2) + 'px');
            }
        }
    }
</script>

